<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">角色列表</h3>
        <div class="box-tools pull-right">
            <a href="javascript:showAddRole();" title="添加角色" class="btn btn-sm btn-info btn-flat pull-left"><i class="fa fa-fw fa-user-plus"></i> 添加新角色</a>
        </div>
    </div>
    <div class="box-body">
        <div class="table-responsive">
            <table class="table no-margin">
                <tr>
                    <th >#ID</th>
                    <th >角色名</th>
                    <th >描述</th>
                    <th >排序值</th>
                    <!--th >状态</th-->
                    <th >操作</th>
                </tr>
            </thead>
            <tbody>
                {volist name="list" id="data"}
                <tr>
                    <td>{$data.id}</td>
                    <td>{$data.rolename}</td>
                    <td>{$data.description}</td>
                    <td>{$data.list_order}</td>
                    <!--td>
                        <input class="bootstrap-switch" type="checkbox" {if($data->is_use)}checked="checked"{/if} data-size="mini" data-on-color="primary" data-off-color="default" data-on-text="Y" data-off-text="N">
                    </td-->
                    <td> 
                        <a href="javascript:showEditRole({$key});">编辑</a>
                        |
                        <a href="{:url('power/editRolePriv',['id' => $data->id])}">权限设置</a>
                    </td>
                </tr>
                {/volist}

            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    var list = {$list | json_encode};
    /**
     * 显示为添加
     * @returns {undefined}
     */
    function showAddRole() {
        modelReset();
        $("#menuModal").modal('show');
    }

    /**
     * 显示为编辑
     * @param {type} key
     * @returns {undefined}
     */
    function showEditRole(key) {
        modelReset();
        var role = list[key];
        $("#role-id").val(role.id);
        $("#rolename").val(role.rolename);
        $("#description").val(role.description);
        $("#menu-order").val(role.list_order);
        $("#menu-display").val(role.is_use);
        $("#menuModal").modal('show');
    }

    /**
     * 清空表单
     * @returns {undefined}
     */
    function modelReset() {
        $('#menuModal .jqueryfrom')[0].reset();
    }
</script>

<!-- Modal -->
<div class="modal fade" id="menuModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">编辑角色</h4>
            </div>
            <form action="{:url('power/editRole')}" class="form-horizontal jqueryfrom" id='menu-form' method="post">
                <input type='hidden' name='id' id='role-id' value='' />
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="rolename" class="col-sm-2 control-label">角色名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="rolename" placeholder="rolename" name='rolename' required />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="description" class="col-sm-2 control-label">角色描述</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="description" name='description' placeholder="description">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="menu-order" class="col-sm-2 control-label">角色排序</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="menu-order" name='list_order' placeholder="排序值">
                            </div>
                        </div>
                        <!--div class="form-group">
                            <label for="menu-display" class="col-sm-2 control-label">是否可用</label>
                            <div class="col-sm-3">
                                <select class="form-control" id="menu-display" name="is_use">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>